<!-- 文件列表表格布局item license by http://eleadmin.com -->
<template>
  <div :class="['ele-file-list-table-item', { checked: checked }]">
    <!-- item body -->
    <div class="ele-file-list-table-item-body">
      <!-- 复选框 -->
      <div v-if="checkbox" class="ele-file-list-table-item-check-group">
        <i :class="checkboxClass" @click.stop="itemCheckChange"></i>
      </div>
      <!-- 图标和标题 -->
      <div class="ele-file-list-table-item-name">
        <div class="ele-file-list-table-item-icon">
          <img
            :src="icon"
            :alt="item.name"
            class="ele-file-list-table-item-icon-image"
            @click="itemClick"
          />
          <div
            :title="item.name"
            class="ele-file-list-table-item-title ele-text-primary"
            @click="itemClick"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="ele-file-list-table-item-tool-group">
          <slot name="tool" :item="item" />
        </div>
      </div>
      <!-- 大小 -->
      <div class="ele-file-list-table-item-size">{{ item.length }}</div>
      <!-- 修改时间 -->
      <div class="ele-file-list-table-item-time">{{ item.updateTime }}</div>
    </div>
    <!-- 背景和边框 -->
    <div class="ele-file-list-table-item-bg ele-bg-primary"></div>
    <div class="ele-file-list-table-item-border ele-border-primary"></div>
  </div>
</template>

<script>
  export default {
    name: 'EleFileTableItem',
    emits: ['item-click', 'item-check-change'],
    props: {
      // item数据
      item: {
        type: Object,
        required: true
      },
      // 是否显示复选框
      checkbox: Boolean,
      // 选中数据
      selection: Array,
      // 后缀对应的图标
      icons: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        // 复选框class
        checkboxClass: [
          'ele-file-list-table-item-check',
          'ele-file-icon-check',
          'ele-bg-primary'
        ].join(' ')
      };
    },
    computed: {
      // 是否选中
      checked() {
        return (
          Array.isArray(this.selection) && this.selection.includes(this.item)
        );
      },
      // 对应图标
      icon() {
        // 文件夹
        if (this.item.isDirectory) {
          const temp = this.icons.find((d) => d.type === 'dir');
          return temp?.icon;
        }
        // 匹配后缀对应的图标
        let ic;
        this.icons.forEach((d) => {
          if (d.types) {
            d.types.forEach((s) => {
              if (this.item.name.endsWith(s)) {
                ic = d.icon;
              }
            });
          }
        });
        if (!ic) {
          const temp = this.icons.find((d) => d.type === 'file');
          ic = temp?.icon;
        }
        return ic;
      }
    },
    methods: {
      /* item点击事件 */
      itemClick() {
        this.$emit('item-click', this.item);
      },
      /* item复选框点击事件 */
      itemCheckChange() {
        this.$emit('item-check-change', this.item);
      }
    }
  };
</script>

<style lang="scss">
  // 文件列表表格布局item
  .ele-file-list-table-item {
    // 图标和标题
    .ele-file-list-table-item-icon {
      flex: 1;
      height: 24px;
      overflow: hidden;
    }

    .ele-file-list-table-item-icon-image {
      width: 24px;
      height: 24px;
      object-fit: cover;
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
    }

    .ele-file-list-table-item-title {
      display: inline;
      padding-left: 10px;
      box-sizing: border-box;
      word-break: break-all;
      vertical-align: top;
      line-height: 24px;
      cursor: pointer;

      &:not(:hover) {
        color: inherit;
      }
    }

    // 工具按钮
    .ele-file-list-table-item-tool-group {
      flex-shrink: 0;
      display: none;
      align-items: center;
      box-sizing: border-box;
      padding: 0 15px;
      cursor: default;

      .ele-file-list-item-tool {
        margin-right: 15px;
        font-size: 16px;
        cursor: pointer;
        line-height: 1;
      }
    }

    &:hover .ele-file-list-table-item-tool-group {
      display: flex;
    }

    // 背景和边框
    .ele-file-list-table-item-bg,
    .ele-file-list-table-item-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: none;
    }

    &:hover .ele-file-list-table-item-bg,
    &.checked .ele-file-list-table-item-bg {
      opacity: 0.06;
      display: block;
    }

    &:hover .ele-file-list-table-item-border,
    &:not(.ele-file-list-table-item-header):hover
      + .ele-file-list-table-item
      .ele-file-list-table-item-border,
    &.checked .ele-file-list-table-item-border,
    &.checked + .ele-file-list-table-item .ele-file-list-table-item-border {
      opacity: 0.3;
      border-top-width: 1px;
      border-top-style: solid;
      display: block;
    }

    &:not(.ele-file-list-table-item-header):last-child:hover
      .ele-file-list-table-item-border,
    &:not(.ele-file-list-table-item-header):last-child.checked
      .ele-file-list-table-item-border {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
  }
</style>
